<!--大屏管理左侧-->
<template>
	<el-container class="list">
		<el-aside width="220px">
			<ul class="menu">
				<li
					:index="item.categoryValue"
					:key="item.categoryValue"
					v-for="item in typeList"
					:class="{ 'is-active': item.categoryValue === activeName }"
					@click="handleSelect(item.categoryValue)"
				>
					<i class="el-icon-s-order"></i>
					{{ item.categoryKey }}
				</li>
			</ul>
		</el-aside>
		<el-container>
			<el-header class="content__header">
				<div class="content__box content__nav">
					<div class="content__add" @click="handleAdd">
						<img :src="`${$router.options.base}img/new-project.png`" height="40px" alt="" />
						<p>新建大屏</p>
					</div>

					<div class="content__page">
						<el-radio-group v-model="presentationStyle" size="mini">
							<el-radio-button label="缩略图版"></el-radio-button>
							<el-radio-button label="纯表格版"></el-radio-button>
						</el-radio-group>
						<div class="visualName">
							<el-input placeholder="请输入看板名称" v-model="visualName" class="input-with-select" size="small">
								<el-button slot="append" icon="el-icon-search" @click="searchVisualList(visualName)"></el-button>
							</el-input>
						</div>
					</div>
				</div>
			</el-header>
			<el-main class="content boardList">
				<div
					class="compList"
					v-loading="loading"
					element-loading-text="大屏看板列表加载中，请稍后..."
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					<avue-crud :data="list" :option="visualTableOption" v-if="presentationStyle == '纯表格版'">
						<template slot-scope="{ row, index }" slot="menu">
							<el-button type="text" icon="el-icon-view" size="small" @click="handleViews(row, index)">预览</el-button>
							<el-button type="text" icon="el-icon-share" size="small" @click="handleEdit(row, index)">编辑</el-button>
							<el-button type="text" icon="el-icon-download" size="small" @click="handleExport(row, index)">导出</el-button>
							<el-button type="text" icon="el-icon-copy-document" size="small" @click="handleCopy(row, index)">复制</el-button>
						</template>
					</avue-crud>
					<div v-else class="content__box">
						<div class="content__item" v-for="(item, index) in list" :key="index" @mouseover="item._menu = true" @mouseout="item._menu = false">
							<div class="content__info">
								<img v-if="item.backgroundUrl" :src="item.backgroundUrl" alt="" />
							</div>
							<div class="content__main">
								<span class="content__name" :title="item.title">
									{{ item.title }}
								</span>
								<div class="content__menulist"></div>
							</div>
							<div class="content__main">
								<span class="content__time">
									{{ item.createTime }}
								</span>
								<div class="content__menulist">
									<div class="content__view"></div>
									<span
										class="content__status"
										:class="{
											'content__status--active': item.status
										}"
									>
										{{ item.status ? '已发布' : '未发布' }}
									</span>
								</div>
							</div>
							<div class="content__menu" v-show="item._menu">
								<div class="content__right">
									<el-tooltip content="分享">
										<i class="el-icon-share" @click="handleShare(item, index)"></i>
									</el-tooltip>

									<!-- <el-tooltip content="导出">
										<i class="el-icon-download" @click="handleExport(item, index)"></i>
									</el-tooltip> -->
									<el-tooltip content="预览">
										<i class="el-icon-view" @click="handleViews(item, index)"></i>
									</el-tooltip>
								</div>
								<el-drawer :title="share.title" :append-to-body="true" :modal-append-to-body="true" :visible.sync="share.visible" direction="rtl">
									<span>用户列表</span>
									<p>后续功能</p>
								</el-drawer>
								<div class="content__btn" @click="handleEdit(item)">编辑</div>
								<div class="content__list">
									<el-tooltip content="修改">
										<i class="el-icon-edit" @click="handleUpdate(item, index)"></i>
									</el-tooltip>
									<el-tooltip content="删除">
										<i class="el-icon-delete" @click="handleDel(item, index)"></i>
									</el-tooltip>
									<el-tooltip content="复制">
										<i class="el-icon-copy-document" @click="handleCopy(item, index)"></i>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="pagination">
					<el-pagination
						v-if="page.total > 0"
						layout="total, sizes, prev, pager, next, jumper"
						background
						size="mini"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:page-size="page.size"
						:page-sizes="[15, 30, 40, 50]"
						:current-page.sync="page.page"
						:total="page.total"
					>
					</el-pagination>
				</div>
			</el-main>
		</el-container>
		<el-dialog title="编辑大屏" width="50%" :close-on-click-modal="false" :visible.sync="box">
			<avue-form :option="option" v-model="form" @submit="handleSave"></avue-form>
		</el-dialog>
	</el-container>
</template>
<script>
import { getList, updateObj, delObj, getCategory, copyObj } from '@/api/visual';
import { getObj } from '@/api/visual';
import { basePrefix } from '@/config';
import { viewHtml } from '@/utils/html';
import { mapState, mapGetters } from 'vuex';
export default {
	name: 'list',
	data() {
		return {
			share: {
				title: '',
				visible: false
			},
			loading: false,
			visualName: '',
			typeList: [],
			box: false,
			option: {
				submitText: '修改大屏',
				column: [
					{
						label: '分组',
						prop: 'category',
						span: 24,
						labelWidth: 100,
						type: 'select',
						dicUrl: basePrefix + '/category/list',
						props: {
							label: 'categoryKey',
							value: 'categoryValue'
						},
						rules: [
							{
								required: true,
								message: '请选择分组',
								trigger: 'blur'
							}
						]
					},
					{
						label: '大屏名称',
						span: 24,
						labelWidth: 100,
						prop: 'title',
						rules: [
							{
								required: true,
								message: '请输入大屏名称',
								trigger: 'blur'
							}
						]
					},
					{
						label: '密码',
						span: 24,
						type: 'password',
						labelWidth: 100,
						prop: 'password'
					},
					{
						label: '发布状态',
						prop: 'status',
						span: 24,
						labelWidth: 100,
						type: 'select',
						dicData: [
							{
								label: '未发布',
								value: 0
							},
							{
								label: '已发布',
								value: 1
							}
						]
					}
				]
			},
			page: {
				page: 1,
				size: 15,
				total: 0
			},
			presentationStyle: '缩略图版',
			visualTableOption: {
				rowKey: 'id',
				addBtn: false,
				delBtn: false,
				columnBtn: false,
				refreshBtn: false,
				editBtn: false,
				menuWidth: 300,
				height: 520,
				index: true,
				indexLabel: '序号',
				column: [
					{
						label: '看板名称',
						prop: 'title',
						width: 350
					},
					{
						label: '看板密码',
						prop: 'password'
					},
					{
						label: '创建时间',
						prop: 'createTime'
					},
					{
						label: '更新时间',
						prop: 'updateTime'
					},
					{
						label: '状态',
						prop: 'status',
						type: 'select',
						dicData: [
							{
								label: '未发布',
								value: 0
							},
							{
								label: '已发布',
								value: 1
							}
						]
					}
				]
			},
			form: {},
			activeName: '',
			list: []
		};
	},
	created() {
		this.getCategory();
	},
	mounted() {},
	computed: {
		...mapState(['token', 'tenantId', 'siteId']),
		...mapGetters(['avatar', 'userName', 'userId'])
	},
	methods: {
		handleSelect(key) {
			this.activeName = key;
			this.page.page = 1;
			this.getList();
		},
		vaildData(id) {
			const list = [];
			for (var i = 0; i < 20; i++) {
				list.push(i);
			}
			return list.includes(id);
		},
		getCategory() {
			getCategory().then(res => {
				const data = res.data.data;
				// .filter(
				//     (d) => d.categoryKey == "测试库"
				// );
				this.typeList = data;
				this.activeName = (data[0] || {}).categoryValue;
				this.getList();
			});
		},
		handleShare(item, index) {
			this.share.visible = true;
			this.share.title = item.title + '看板分享';
		},
		handleExport(item) {
			getObj(item.id).then(res => {
				this.$message.success('大屏导出成功');
				const data = res.data.data;
				let mode = {
					detail: JSON.parse(data.config.detail),
					component: JSON.parse(data.config.component)
				};
				var zip = new window.JSZip();
				zip.file('view.js', `const option =${JSON.stringify(mode, null, 4)}`);
				let result = viewHtml;
				result = result.replace('{title}', `${this.$website.title}-${item.title}`);
				zip.file('index.html', result);
				zip.generateAsync({ type: 'base64' }).then(function (content) {
					location.href = 'data:application/zip;base64,' + content;
				});
			});
		},
		handleCopy(item) {
			if (this.$website.isDemo) {
				this.$message.error(this.$website.isDemoTip);
				return;
			}
			this.$confirm('确认复制当前大屏', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					copyObj(item.id).then(res => {
						this.$message.success('复制成功');
						const id = res.data.data;
						this.handleEdit({ id });
					});
				})
				.catch(() => {});
		},
		handleDel(item, index) {
			if (this.vaildData(index) && this.$website.isDemo) {
				this.$message.error(this.$website.isDemoTip);
				return false;
			}
			this.$confirm('是否确认永久删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					delObj(item.id).then(() => {
						this.list.splice(index, 1);
						this.$message.success('删除成功');
						this.page.page = 1;
						this.getList();
					});
				})
				.catch(() => {});
		},
		handleAdd() {
			this.$router.push({
				path: '/create',
				query: {
					category: this.activeName
				}
			});
		},
		handleUpdate(item, index) {
			if (this.vaildData(Number(index)) && this.$website.isDemo) {
				this.$message.error(this.$website.isDemoTip);
				return false;
			}
			this.form = item;
			this.form.category = this.form.category + '';
			this.box = true;
		},
		handleEdit(item) {
			let routeUrl = this.$router.resolve({
				path: `/build/${item.id}?tenantId=${this.tenantId}&userId=${this.userId}&siteId=${this.siteId}&token=${this.token}`
			});
			window.open(routeUrl.href, '_self');
			// this.$router.push(
			//     `/build/${item.id}?tenantId=${this.tenantId}&userId=${this.userId}&siteId=${this.siteId}&token=${this.token}`
			// );
		},
		handleViews(item) {
			let routeUrl = this.$router.resolve({
				path: `/view/${item.id}?tenantId=${this.tenantId}&userId=${this.userId}&siteId=${this.siteId}&token=${this.token}`
			});
			window.open(routeUrl.href, '_blank');
		},
		handleSave(form, done) {
			updateObj({
				id: this.form.id,
				category: this.form.category,
				password: this.form.password,
				status: this.form.status,
				title: this.form.title
			}).then(() => {
				done();
				this.$message.success('修改成功');
				this.getList();
			});
		},
		handleCurrentChange(val) {
			this.page.page = val;
			this.getList();
		},
		handleSizeChange(val) {
			this.page.size = val;
			this.getList();
		},
		getList(category) {
			this.list = [];
			this.loading = true;
			getList({
				title: this.visualName,
				category: category || this.activeName,
				current: this.page.page,
				size: this.page.size
			})
				.then(res => {
					const data = res.data.data;
					this.page.total = data.total;
					this.list = data.records;
					this.initData();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		initData() {
			this.list.forEach((ele, index) => {
				this.$set(this.list[index], '_menu', false);
			});
		},
		searchVisualList(name) {
			this.visualName = name;
			this.getList();
		}
	}
};
</script>
<style lang="scss">
@import '@/styles/list.scss';
.list {
	.content {
		.avue-crud__menu {
			display: none;
		}
		.compList {
			flex: 1;
		}
		.pagination {
			display: flex;
			justify-content: flex-end;
			margin: 15px 30px 0 0;
		}
	}
	.boardList {
		padding: 0 10px 10px;
	}
}
</style>
